<template>
  <div class="not-found">
    <Header />
    
    <div class="container text-center py-5">
      <div class="error-code">404</div>
      <h1 class="error-title">页面未找到</h1>
      <p class="error-message">您访问的页面不存在或已被移除</p>
      <router-link to="/" class="btn btn-primary mt-3">返回首页</router-link>
    </div>
    
    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: 'NotFound',
  components: {
    Header,
    Footer
  }
}
</script>

<style scoped>
.not-found {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.error-code {
  font-size: 120px;
  font-weight: bold;
  color: #f8d7da;
  line-height: 1;
}

.error-title {
  font-size: 36px;
  margin: 20px 0;
  color: #721c24;
}

.error-message {
  font-size: 18px;
  color: #721c24;
  margin-bottom: 30px;
}

.btn-primary {
  background-color: #721c24;
  border-color: #721c24;
}

.btn-primary:hover {
  background-color: #5a161c;
  border-color: #5a161c;
}
</style>